<template>
    <div class="mui-content enterpriseOrderDetail mui-scroll-wrapper" v-bind:class="{mgb2:mgClass2}"  id="orderDetailHeader">
        <div class="mui-scroll">
            <!--订单状态-->
            <ul class="mui-table-view orderStatus mgb1 mgt1">
                <li class="mui-table-view-cell">
                    <p class="col-9">
                        <span class="text2-size color1">订单编号：</span>
                        <span class="orderNumber text2-size color1 ">{{order.orderCode}}</span>
                    </p>
                    <p class="col-3 mui-text-right text2-size color4">{{order.orderStatus | orderStatusEnterprise}}</p>
                </li>
                <li class="mui-table-view-cell">
                    <span class="text3-size color2">生成时间：</span>
                    <span class="text3-size color2 orderRiseTime">{{order.orderCreateTime}}</span>
                </li>
                <li v-if="order.orderConfirmTime != null" class="mui-table-view-cell text3">
                    <span>确认时间：</span>
                    <span>{{order.orderConfirmTime}}</span>
                </li>
                <li v-if="order.orderCancelTime != null" class="mui-table-view-cell text3">
                    <span>取消时间：</span>
                    <span>{{order.orderCancelTime}}</span>
                </li>
                <li v-if="order.orderSignTime != null" class="mui-table-view-cell text3">
                    <span>竣工时间：</span>
                    <span>{{order.orderSignTime}}</span>
                </li>
                <li v-if="order.orderCommentTime != null" class="mui-table-view-cell text3">
                    <span>评价时间：</span>
                    <span>{{order.orderCommentTime}}</span>
                </li>
            </ul>
            <!--车辆信息-->
            <div class="slwy-panel orderCarInfo">
                <div class="panel-content">
                    <div class="panel-title">车辆信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <p class="col-6  text3">{{order.carPlateNumber}}</p>
                            <p class="col-6 mui-text-right text3">{{order.carBrand}}{{order.carModel}}</p>
                        </li>
                        <li class="mui-table-view-cell">
                            <p class="col-6 text3">
                                <span>{{order.carBuyPrice}}</span>
                            </p>
                            <p class="col-6 mui-text-right text3">
                                <span>购买于{{order.carBuyDate}}</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--联系人-->
            <div class="slwy-panel orderContacts">
                <div class="panel-content">
                    <div class="panel-title">联系人</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">
                            <p class="col-6 text3">{{order.orderContact}}</p>
                            <p class="col-6 mui-text-right text3">
                                <i class="mui-icon mui-icon-phone-filled text3"></i>
                                <span>{{order.orderContactPhone}}</span>
                            </p>
                        </li>
                        <li class="mui-table-view-cell text3" v-if="order.orderAppointTime != null">
                            <p class="col-6 text3">{{order.orderAppointTime}}到店</p>
                            <p class="col-6 mui-text-right text3" v-if="order.orderStatus == 3" @click="loadAppointTime('EDIT')">
                                <span class="text2-size color3">修改预约</span>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <!--维修信息-->
            <div class="slwy-panel repairInfo">
                <div class="panel-content">
                    <div class="panel-title ">维修信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell text3">{{order.orderGoods}}</li>
                        <li class="mui-table-view-cell text3">
                            <p class="text3">
                                <span>预估报价:</span>
                                <span class="price">{{order.orderTotalAmount | currency '￥' 2 }}</span>
                            </p>
                        </li>
                        <li class="mui-table-view-cell text3 mui-checkbox" style="display: none;">
                            <label class="text3">车辆出险</label>
                            <input name="checkbox" type="checkbox" class="customCheck" disabled="disabled">
                        </li>
                    </ul>
                </div>
            </div>
            <!--车损信息-->
            <div class="slwy-panel damageInfo">
                <div class="panel-content">
                    <div class="panel-title">车损信息</div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <div v-for="image in order.orderImages" class="damageImg col-4">
                                <img v-bind:src="image" data-preview-src="" data-preview-group="1">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="fixedOperate mui-clearfix" v-if="order.orderStatus < 4">
        <div class="col-4" v-if="order.orderStatus == 2 || order.orderStatus == 3">
            <a href="tel:{{order.orderContactPhone}}" class="mui-btn mui-btn-primary contactCarBtn">联系车主</a>
        </div>
        <div class="col-4" v-if="order.orderStatus == 2">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="loadAppointTime('NEW')">维修预约</button>
        </div>
        <div class="col-4" v-if="order.orderStatus == 3">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="finish(order.orderCode)">维修竣工</button>
        </div>
        <div class="col-4" v-if="order.orderStatus == 2 || order.orderStatus == 3">
            <button type="button" class="mui-btn mui-btn-outlined" v-link="{name:'orderCancel',params:{id:order.orderCode}}">取消订单</button>
        </div>
    </div>
    <!-- 预约时间表单 -->
    <div id="appointTimePopover" class="mui-popover mui-popover-action mui-popover-bottom">
        <div class="mui-input-group">
            <div class="bespokeTimeTitle mui-table-view-cell mui-text-left">
                <p class="text2 mui-text-left">
                    <span class="color1 text3-size">订单编号</span>
                    <span class="mui-pull-right color2 text3-size mgr1">{{order.orderCode}}</span>
                </p>
            </div>
            <div class="mui-table-view-cell mui-text-left" @click.stop="datePicker($event)" id="bespokeTimeInput"  data-options=''>
                <p class="text2 mui-navigate-right mui-text-left">
                    <span class="text3-size color1 mui-text">预约时间</span>
                    <span class="mui-pull-right color2 mgr1 text2-size">{{newAppointTime}}</span>
                </p>
            </div>
            <div class="popBtn">
                <button class="mui-btn" @click.stop="cancelModifyAppointTime()">取消</button>
                <button class="mui-btn mui-btn-primary" @click.stop="doModifyAppointTime()">确认</button>
            </div>
        </div>
    </div>
</template>
<style>
    /*订单状态*/
    .enterpriseOrderDetail .damageInfo .damageImg{height: 2.15rem; padding: 0 0.05rem; margin:0.05rem 0; border-radius: 5px; overflow: hidden; box-sizing: border-box;}
    .enterpriseOrderDetail .mui-scroll{height: auto;}
    .enterpriseOrderDetail .damageInfo .damageImg img{width: 100%;}
    .fixedOperate>div:first-child{padding:0 0.15rem 0 0.3rem;}
    .fixedOperate>div:nth-child(2){padding:0 0.15rem;}
    .fixedOperate>div:last-child{padding:0 0.3rem 0 0.15rem;}
    .fixedOperate>div>button, .fixedOperate>div>a{width: 100%; font-size: 0.3rem; display: inline-block;}
    /*底部弹窗*/
    #appointTimePopover{ position: fixed; z-index: 10000; top: 50%; left: 50%; overflow: hidden; width: 75%; max-height: 3.2rem; -webkit-transition-property: -webkit-transform,opacity; transition-property: transform,opacity; -webkit-transform: translate3d(-50%,-50%,0) scale(1.185);transform: translate3d(-50%,-50%,0) scale(1.185);text-align: center;opacity:1;border-radius: 13px;}
    #appointTimePopover .mui-input-group{
        background: #fff;
        z-index: 1000;
        padding: 0.1rem 0.2rem;
        height: 3.2rem;
    }
    #appointTimePopover .mui-input-row{ height: 0.8rem;}
    #appointTimePopover .mui-input-row label{ height: 0.8rem; padding: 0.3rem 0;}
    #appointTimePopover .mui-input-row input{ height: 0.8rem;}
    /*图片预览*/
    .mui-preview-image.mui-fullscreen {
        position: fixed;
        z-index: 2000;
        background-color: #000;
    }
    .mui-preview-header,
    .mui-preview-footer {
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 10;
    }
    .mui-preview-header {
        height: 1rem;
        top: 1.5rem;
    }
    .enterpriseOrderDetail .mui-preview-footer {
        height: 50px;
        bottom: 0px;
    }
    .mui-preview-header .mui-preview-indicator {
        display: block;
        line-height: 25px;
        color: #fff;
        text-align: center;
        margin: 0 auto !important;
        width: 2rem;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 12px;
        font-size: 0.3rem;
    }
    .mui-preview-image {
        display: none;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    .mui-preview-image.mui-preview-in {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
    }
    .mui-preview-image.mui-preview-out {
        background: none;
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }
    .mui-preview-image.mui-preview-out .mui-preview-header,
    .mui-preview-image.mui-preview-out .mui-preview-footer {
        display: none;
    }
    .mui-zoom-scroller {
        position: absolute;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        -webkit-backface-visibility: hidden;
    }
    .mui-zoom {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .mui-slider .mui-slider-group .mui-slider-item img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
        width: 100%;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
        display: inline-table;
    }
    .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
        display: table-cell;
        vertical-align: middle;
    }
    .mui-preview-loading {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
    }
    .mui-preview-loading.mui-active {
        display: block;
    }
    .mui-preview-loading .mui-spinner-white {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        height: 50px;
        width: 50px;
    }
    .mui-preview-image img.mui-transitioning {
        -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    @-webkit-keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    @keyframes fadeOut {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
</style>
<script type="text/ecmascript-6">
    import '../../fonts/mui.css';
    import datePickerComponent from '../../components/date-picker/date-picker.vue';
    import previewImage from '../../components/preview-image/preview-image.vue';
    import Page from '../../base/Page';
    import { API } from '../../config/constants';
    export default new Page({
        data(){
            return{
                order:{},
                newAppointTime:'',
                optType:'NEW',
                mgClass2:true,
            }
        },
        ready () {
            this.getJSON(API.GET_ORDER_DETAIL, {id:this.$route.params.id}, res => {
                this.order = res.resultData;
                this.order.orderImages = this.order.orderImages==null?[]:this.order.orderImages.split(',');

                if(this.order.orderStatus<4){
                    this.mgClass2=true;
                }else{
                    this.mgClass2=false;
                }
                //console.log(JSON.stringify(this.order));
            });
            /*上拉下拉*/
            mui('.mui-scroll-wrapper').scroll({
                indicators: true, //是否显示滚动条
                deceleration : 0.0005,
            });
            /*图片预览初始化*/
            mui.previewImage();

        },
        components:{
            datePickerComponent,
            previewImage
        },
        methods:{
            loadAppointTime:function (optType) {
                this.optType = optType;//操作方式初始化
                if ('NEW' === optType) {
                    //TODO:当前时间
                    this.newAppointTime = (new Date()).Format("yyyy-MM-dd hh:mm");
                } else if ('EDIT' === optType) {
                    this.newAppointTime = this.order.orderAppointTime;
                }

                mui('#appointTimePopover').popover('toggle');
            },
            cancelModifyAppointTime: function () {
                mui('#appointTimePopover').popover('hide');
            },
            doModifyAppointTime: function () {
                mui('#appointTimePopover').popover('toggle');
                var postParam = {orderCode:this.order.orderCode,orderAppointTime:this.newAppointTime};
                var apiUrl = API.POST_ORDER_CONFIRM;//初始化提交API地址
                var successType = 'orderConfirm';
                if ('EDIT' === this.optType) {
                    apiUrl = API.POST_ORDER_MODIFY;
                    successType = 'appointTimeModify';
                }

                //提交接口
                this.post(apiUrl, postParam, res => {
                    this.$route.router.go('/tip/success/' + successType);
                });
            },
            finish:function (orderCode) {
                let that = this;
                var btnArray = ['是', '否'];
                mui.confirm('车辆维修是否已竣工？','', btnArray, function(e) {
                    if (e.index == 0) {
                        //确认操作
                        that.post(API.POST_ORDER_SIGN, {orderCode:orderCode}, res => {
                            //success
                            that.$route.router.go('/tip/success/ordersign');
                        });
                    }
                })
            },
            datePicker: function (e) {
                let that = this;
                (function ($) {
                    $.init();
                    var bespokeTime= document.getElementById('bespokeTimeInput');
                    var bespokeTimeValue = bespokeTime.getElementsByTagName('span')[1];
                    var optionsJson = bespokeTime.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var nowDate = new Date();
                    var endSelectDate = new Date((new Date()).setDate(nowDate.getDate() + 30));
                    //初始化时间组件
                    var picker = new $.DtPicker({
                        beginDate:new Date(nowDate.getFullYear(),nowDate.getMonth(),nowDate.getDate()),
                        endDate:new Date(endSelectDate.getFullYear(),endSelectDate.getMonth(),endSelectDate.getDate()),
                        "customData": {
                            "h": [
                                {
                                    value: "8",
                                    text: "08"
                                },{
                                    value: "9",
                                    text: "09"
                                },{
                                    value: "10",
                                    text: "10"
                                },{
                                    value: "11",
                                    text: "11"
                                },{
                                    value: "12",
                                    text: "12"
                                },{
                                    value: "13",
                                    text: "13"
                                },{
                                    value: "14",
                                    text: "14"
                                },{
                                    value: "15",
                                    text: "15"
                                },{
                                    value: "16",
                                    text: "16"
                                },{
                                    value: "17",
                                    text: "17"
                                },
                            ],"i": [
                                {
                                    value: "0",
                                    text: "00"
                                }, {
                                    value: "30",
                                    text: "30"
                                },
                            ]
                        }
                    });
                    picker.show(function (rs) {
                        bespokeTimeValue.innerText = rs.text;
                        that.newAppointTime=rs.text;
                        picker.dispose();
                    });
                    this.noblur(e);
                })(mui);
            },
            noblur:function (e) {
                var bInput=mui("input");
                var bTextarea=mui("textarea");
                bInput.each(function() {
                    e.target.blur();
                });
                bTextarea.each(function() {
                    e.target.blur();
                });
            }
        }
    });

</script>